<template>
  <el-config-provider :locale="zhCn">
    <div>
      <el-form :model="formData" ref="form" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
              <el-form-item label="基本信息" label-position="top"
                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                <div class="progress-bar">
                  <div class="progress"></div>
                </div>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="工号" label-position="top" required>
                <el-input 
                  :placeholder="formData.employeeIdNumber || '请输入工号'" 
                  v-model="formData.employeeIdNumber" 
                  :disabled="!isEditing"
                  style="width: 260px;" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="登录密码" label-position="top" required>
                <el-input 
                  :placeholder="formData.loginPassword || '请输入登录密码'" 
                  v-model="formData.loginPassword" 
                  :disabled="!isEditing"
                  type="password"
                  style="width: 260px;" 
                  clearable show-password />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="姓名" label-position="top" required>
                <el-input 
                  :placeholder="formData.employeeName || '请输入姓名'" 
                  v-model="formData.employeeName" 
                  :disabled="!isEditing"
                  style="width: 260px;" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="身份证" label-position="top" required>
                <el-input 
                  :placeholder="formData.employeeNumber || '请输入身份证'" 
                  v-model="formData.employeeNumber" 
                  :disabled="!isEditing"
                  style="width: 260px;" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="性别" label-position="top" required>
                                <el-select 
                                    v-model="formData.employeeAge" 
                                    :placeholder="formData.employeeAge || '请选择性别'" 
                                    :disabled="!isEditing" 
                                    style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option 
                                        v-for="item in GenderData" 
                                        :key="item.value" 
                                        :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="出生日期" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.employeeBirthdate || '请输入出生日期'" 
                                    v-model="formData.employeeBirthdate" 
                                    style="width: 260px" 
                                    :disabled="!isEditing" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="籍贯" label-position="top" required>
                                <el-cascader 
                                    v-model="selectedRegion" 
                                    :options="regionData" 
                                    :placeholder="formData.origin || '请选择籍贯'" 
                                    :disabled="!isEditing"
                                    style="width: 260px" 
                                    clearable 
                                    :teleport="true" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="户籍类型" label-position="top" required>
                                <el-select 
                                    v-model="formData.householdRegistration" 
                                    :placeholder="formData.householdRegistration || '请选择户籍类型'" 
                                    :disabled="!isEditing"
                                    style="width: 260px" 
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option 
                                        v-for="item in HouseholdRegistrationData" 
                                        :key="item.value"
                                        :label="item.label" 
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="政治面貌" label-position="top" required>
                                <el-select 
                                    v-model="formData.politicalAppearance" 
                                    :placeholder="formData.politicalAppearance || '请选择政治面貌'" 
                                    :disabled="!isEditing"
                                    style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option 
                                        v-for="item in PoliticalStatusData" 
                                        :key="item.value" 
                                        :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="手机号" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.employeePhone || '请输入手机号'" 
                                    v-model="formData.employeePhone" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="婚育情况" label-position="top" required>
                                <el-select 
                                    v-model="formData.maritalStatus" 
                                    :placeholder="formData.maritalStatus || '请选择婚育情况'" 
                                    :disabled="!isEditing" 
                                    style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option 
                                        v-for="item in MarriageAndChildbearingData" 
                                        :key="item.value"
                                        :label="item.label" 
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="民族" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.ethnicGroup || '请输入民族'" 
                                    v-model="formData.ethnicGroup" 
                                    :disabled="!isEditing"
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="户籍所在地" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.placeHouseholdRegistration || '请输入户籍所在地'" 
                                    v-model="formData.placeHouseholdRegistration" 
                                    :disabled="!isEditing"
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="参加工作日期" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.dateParticipation || '请输入参加工作日期'" 
                                    v-model="formData.dateParticipation" 
                                    style="width: 260px" 
                                    :disabled="!isEditing"
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="紧急联系人" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.emergencyContactsName || '请输入紧急联系人'" 
                                    v-model="formData.emergencyContactsName" 
                                    :disabled="!isEditing"
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="紧急联系人关系" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.emergencyContactsRelationship || '请输入关系'" 
                                    v-model="formData.emergencyContactsRelationship" 
                                    :disabled="!isEditing"
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="紧急联系人电话" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.emergencyContactsPhone || '请输入联系电话'" 
                                    v-model="formData.emergencyContactsPhone" 
                                    :disabled="!isEditing"
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="账户信息" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="参保城市" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.MarriageAndChildbearing || '暂无参保城市'" 
                                    v-model="formData.MarriageAndChildbearing" 
                                    :disabled="!isEditing" 
                                    clearable 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="社保账号" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.socialSecurity || '请输入社保账号'" 
                                    v-model="formData.socialSecurity" 
                                    :disabled="!isEditing" 
                                    clearable 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="公积金账号" label-position="top">
                                <el-input 
                                    :placeholder="formData.RecruiterID || '暂无公积金账号'" 
                                    v-model="formData.RecruiterID" 
                                    :disabled="!isEditing" 
                                    clearable 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="银行卡号" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.bankCardNumber || '请输入银行卡号'" 
                                    v-model="formData.bankCardNumber" 
                                    :disabled="!isEditing" 
                                    clearable 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="开户行" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.openAnAccount || '请输入开户行'" 
                                    v-model="formData.openAnAccount" 
                                    :disabled="!isEditing" 
                                    clearable 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="入职日期" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="入职日期" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.dateOfInduction || '未入职'" 
                                    v-model="formData.dateOfInduction" 
                                    style="width: 260px" 
                                    :disabled="!isEditing" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                        <el-form-item label="入职部门" label-position="top" required>
                            <el-select 
                            v-model="formData.onboardingDepartment" 
                            :placeholder="formData.onboardingDepartment || '请选择入职部门'" 
                            :disabled="!isEditing"
                            style="width: 260px"
                            @focus="fetchDepartments">
                            <el-option 
                                v-for="dept in departmentList" 
                                :key="dept.deptId" 
                                :label="dept.deptName" 
                                :value="dept.deptName" />
                            </el-select>
                        </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                        <el-form-item label="入职岗位" label-position="top" required>
                            <el-select 
                            v-model="formData.entryPosition" 
                            :placeholder="formData.entryPosition || '请选择入职岗位'" 
                            :disabled="!isEditing"
                            style="width: 260px"
                            @focus="fetchPosts">
                            <el-option 
                                v-for="post in postList" 
                                :key="post.postId" 
                                :label="post.postName" 
                                :value="post.postName" />
                            </el-select>
                        </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="聘用形式" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.employmentForm || '未入职'" 
                                    v-model="formData.employmentForm" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="正式薪资" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.officialSalary || '未入职'" 
                                    v-model="formData.officialSalary" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="员工状态" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.employeeStatus || '请输入员工状态'" 
                                    v-model="formData.employeeStatus" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="是否有试用期" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.whetherProbationPeriod || '未入职'" 
                                    v-model="formData.whetherProbationPeriod" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="试用期薪资" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.probationarySalary || '未入职'"
                                    v-model="formData.probationarySalary" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="试用期天数" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.probationPeriodTime || '未入职'"
                                    v-model="formData.probationPeriodTime" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="转正日期" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.conversionDate || '未入职'" 
                                    v-model="formData.conversionDate" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="教育背景" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="最高学历" label-position="top" required>
                                <el-select 
                                    v-model="formData.degree" 
                                    :placeholder="formData.degree || '请选择最高学历'" 
                                    :disabled="!isEditing" 
                                    style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option 
                                        v-for="item in EducationData" 
                                        :key="item.value"
                                        :label="item.label" 
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="毕业院校" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.graduatedSchool || '暂无毕业院校'" 
                                    v-model="formData.graduatedSchool" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="所需专业" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.major || '暂无所需专业'" 
                                    v-model="formData.major" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="毕业时间" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.graduatedTime || '暂无毕业时间'" 
                                    v-model="formData.graduatedTime" 
                                    style="width: 260px" 
                                    :disabled="!isEditing" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col><el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="申请时间" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.applicationDate || '请输入申请时间'" 
                                    v-model="formData.applicationDate" 
                                    style="width: 260px" 
                                    :disabled="!isEditing" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="部门主管审批" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="部门经理" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.departmentHead || '未入职'" 
                                    v-model="formData.departmentHead" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="部门主管意见" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.departmentHeadOpinion || '未入职'" 
                                    v-model="formData.departmentHeadOpinion" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="HR确认" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="负责HR" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.responsibleFoHr || '未入职'" 
                                    v-model="formData.responsibleFoHr" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="HR确认" label-position="top" required>
                                <el-input 
                                    :placeholder="formData.hrConfirm || '未入职'" 
                                    v-model="formData.hrConfirm" 
                                    :disabled="!isEditing" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <hr>
                <el-form-item style="margin-top: 6px;">
                    <el-button v-if="!isEditing" type="primary" @click="enableEdit">修改</el-button>
                    <el-button v-else type="primary" @click="saveEdit">保存</el-button>
                    <el-button @click="cancelEdit">{{ isEditing ? '取消' : '返回' }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-config-provider>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue';
import request from '@/api/request'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { regionData } from 'element-china-area-data';
const formData = ref({})
const selectedRegion = ref([])
const emit = defineEmits(['close-detail', 'refresh-data']);
const departmentList = ref([]);
const postList = ref([]);
const GenderData = ref([
    { value: '男', label: '男' },
    { value: '女', label: '女' }
])

const HouseholdRegistrationData = ref([
    { value: '农村', label: '农村' },
    { value: '城镇', label: '城镇' }
])

const PoliticalStatusData = ref([
    { value: '群众', label: '群众' },
    { value: '党员', label: '党员' },
    { value: '团员', label: '团员' }
])

const MarriageAndChildbearingData = ref([
    { value: '未婚', label: '未婚' },
    { value: '已婚', label: '已婚' }
])

const EducationData = ref([
    { value: '本科', label: '本科' },
    { value: '硕士', label: '硕士' },
    { value: '博士', label: '博士' },
    { value: '专科', label: '专科' }
])
// 获取部门列表的方法
const fetchDepartments = async () => {
  if (departmentList.value.length > 0) return;
  
  try {
    const response = await request({
      url: '/department/list',
      method: 'get'
    });
    
    if (response && response.code === 200) {
      departmentList.value = response.data;
    }
  } catch (error) {
    console.error('获取部门列表失败:', error);
  }
};
// 获取岗位列表的方法
const fetchPosts = async () => {
  if (postList.value.length > 0) return;
  
  try {
    const response = await request({
      url: '/system/permission/post/list',
      method: 'get'
    });
    
    if (response && response.code === 200) {
      postList.value = response.data;
    }
  } catch (error) {
    console.error('获取岗位列表失败:', error);
  }
};
// 根据用户ID查询用户信息
const getUserById = (userId) => {
    if (!userId) return;
    
    request({
        url: "/into/id",
        method: 'post',
        params: {
            id: userId
        }
    }).then(res => {
        if (res.data) {
            formData.value = {
                ...formData.value, 
                ...res.data
            };
            
            console.log('返回的数据:', res.data);
            console.log('表单数据:', formData.value);
        }
    }).catch(error => {
        console.error('查询用户信息失败:', error);
    });
}
// 组件挂载时查询用户信息
onMounted(() => {
    if (props.userId) {
        getUserById(props.userId);
    }
});
const props = defineProps({
    userId: {
        type: [String, Number],
        default: null
    }
});
// 取消编辑
const cancelEdit = () => {
  if (isEditing.value) {
    isEditing.value = false
    if (props.userId) {
      getUserById(props.userId)
    }
  } else {
    emit('refresh-data');
    emit('close-detail');
  }
}
const isEditing = ref(false)
const enableEdit = () => {
  isEditing.value = true
}
// 保存修改
const saveEdit = () => {
  request({
    url: "/into/update",
    method: 'post',
    data: formData.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage.success('保存成功');
      console.log('保存成功')
      if (props.userId) {
        getUserById(props.userId);
        emit('refresh-data');
      }
    } else {
      ElMessage.error('保存失败，请重试');
    }
  }).catch(error => {
    console.error('保存失败:', error)
    ElMessage.error('保存失败，请重试');
  })
}
let rules = ref({
    username: [
        { required: true, message: "请输入你的名字", trigger: "blur" },
    ],
})

const JobData = ref("");
const xq = ref("")
const IntentionDisplay = ref(false)

const JobPopUpWindow = () => {
    IntentionDisplay.value = true
}

const selectedRowId = ref(null)

const IntentionData = ref([])

const IntentionToCancel = () => {
    IntentionDisplay.value = false
}

const ApplicationType = ref('')

const IntentionConfirmed = () => {
    const selectedRow = IntentionData.value.find(row => row.id === selectedRowId.value)
    console.log('选中的数据:', selectedRow.JobName)
    JobData.value = selectedRow.JobName
    xq.value = selectedRow.RequirementID
    ApplicationType.value = selectedRow.SourceOfPersonnel
    IntentionDisplay.value = false
}

const DateOfBirth = ref('');
const GraduationTime = ref('');
const form = ref(null)
const PositionLabel = ref('');
</script>

<style scoped>
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
}

.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}
</style>